<template>
  <div class="overview-container">
    <!-- 侧边栏 -->
    <CategorySidebar 
      :categories="categories" 
      :initial-category="activeCategory"
      @category-change="onCategorySelect"
    />
    
    <!-- 主内容区 -->
    <main class="overview-content">
      <!-- 标题区域 -->
      <section class="overview-header">
        <h1 class="page-title">
            <span class="gradient-text">功能概览</span>
          </h1>
        <p class="mt-2 text-gray-600 text-base">
          探索我们提供的丰富功能，满足您的各种需求
        </p>
      </section>
      
      <!-- 特性卡片网格 -->
      <section class="features-section">
        <FeatureCard
          v-for="(feature, index) in filteredFeatures"
          :key="feature.title"
          :title="feature.title"
          :description="feature.description"
          :icon="feature.icon"
          :category="feature.category"
          @click="handleFeatureClick(feature)"
          :style="{ animationDelay: `${index * 0.05}s` }"
      />
      </section>
      
      <!-- 无内容提示 -->
      <div v-if="filteredFeatures.length === 0" class="no-features">
        <p>没有找到相关功能</p>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import FeatureCard from '@components/FeatureCard.vue'
import CategorySidebar from '@components/CategorySidebar.vue'
import { useThemeStore } from '@store/theme'

// 主题状态管理
const themeStore = useThemeStore()

// 初始化主题
onMounted(() => {
  themeStore.initTheme()
})

// 分类数据
const categories = [
  { id: 'all', name: '全部功能', icon: '📋' },
  { id: 'core', name: '核心功能', icon: '🔍' },
  { id: 'api', name: 'API接口', icon: '🔌' },
  { id: 'typescript', name: 'TypeScript支持', icon: '📘' },
  { id: 'performance', name: '性能优化', icon: '⚡' },
  { id: 'component', name: '组件系统', icon: '🧩' },
  { id: 'animation', name: '动画效果', icon: '✨' },
  { id: 'state', name: '状态管理', icon: '📊' },
  { id: 'advanced', name: '高级特性', icon: '🚀' }
]

// 当前选中的分类
const activeCategory = ref('all')

// 特性数据
const features = [
  { 
    title: '响应式数据', 
    description: '自动追踪JavaScript状态并在其变化时更新DOM，实现高效的数据绑定。',
    icon: '🔄', 
    category: 'core'
  },
  { 
    title: '组合式API', 
    description: '使用函数式API构建组件，更好的逻辑复用和TypeScript支持。',
    icon: '🧩', 
    category: 'component'
  },
  { 
    title: 'TypeScript支持', 
    description: '全面的TypeScript集成，提供完整的类型检查和开发体验。',
    icon: '📘', 
    category: 'typescript'
  },
  { 
    title: '单文件组件', 
    description: '在一个文件中组合HTML、CSS和JavaScript，实现关注点分离。',
    icon: '📄', 
    category: 'component'
  },
  { 
    title: '虚拟DOM', 
    description: '通过虚拟DOM优化渲染性能，减少不必要的DOM操作。',
    icon: '🎯', 
    category: 'performance'
  },
  { 
    title: '动画系统', 
    description: '内置过渡和动画效果，轻松创建流畅的用户界面交互。',
    icon: '✨', 
    category: 'animation'
  },
  { 
    title: '异步组件', 
    description: '按需加载组件，减少初始加载时间，优化性能。',
    icon: '⏱️', 
    category: 'performance'
  },
  { 
    title: '自定义指令', 
    description: '创建可重用的DOM操作逻辑，扩展Vue的功能。',
    icon: '🔧', 
    category: 'advanced'
  },
  { 
    title: '提供/注入', 
    description: '依赖注入模式，简化组件间的数据传递。',
    icon: '💉', 
    category: 'state'
  },
  { 
    title: '渲染函数', 
    description: '使用JavaScript编写灵活的渲染逻辑，处理复杂场景。',
    icon: '⚙️', 
    category: 'advanced'
  },
  { 
    title: '插件系统', 
    description: '扩展Vue的核心功能，轻松集成第三方库。',
    icon: '🧩', 
    category: 'api'
  },
  { 
    title: '错误处理', 
    description: '统一的错误处理机制，提高应用的稳定性。',
    icon: '🛡️', 
    category: 'core'
  }
]

// 计算过滤后的特性列表
const filteredFeatures = computed(() => {
  if (activeCategory.value === 'all') {
    return features
  }
  return features.filter(feature => feature.category === activeCategory.value)
})

// 处理分类选择
const onCategorySelect = (categoryId) => {
  activeCategory.value = categoryId
}

// 导入路由
import { useRouter } from 'vue-router'
const router = useRouter()

// 特性标题到路由路径的映射
const featureRouteMap = {
  '响应式数据': '/reactive',
  '组合式API': '/composition-api',
  'TypeScript支持': '/typescript',
  '单文件组件': '/components',
  '虚拟DOM': '/performance',
  '动画系统': '/animation-transition',
  '异步组件': '/async-components',
  '自定义指令': '/custom-directives',
  '提供/注入': '/provide-inject',
  '渲染函数': '/advanced-features',
  '插件系统': '/custom-plugins',
  '错误处理': '/advanced-features'
}

// 处理特性卡片点击
const handleFeatureClick = (feature) => {
  console.log('Feature clicked:', feature)
  const routePath = featureRouteMap[feature.title]
  if (routePath) {
    router.push(routePath)
  } else {
    console.warn(`No route found for feature: ${feature.title}`)
  }
}
</script>

<style scoped>
:root {
  --border-radius: 16px;
  --transition: all 0.3s ease;
  --apple-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --color-text-secondary: #666;
}

/* 主容器 */
.overview-container {
  display: flex;
  min-height: calc(100vh - 150px);
  padding: 1rem;
  gap: 1.5rem;
  
  /* 移除背景色，使用App容器的Apple风格渐变背景 */
  background-color: transparent;
}

/* 侧边栏 */
:deep(.category-sidebar) {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: var(--apple-transition);
}

[data-theme="dark"] :deep(.category-sidebar) {
  background: rgba(28, 28, 30, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 主内容区 */
.overview-content {
  flex: 1;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* 为标题区域应用Apple液态玻璃设计效果 */
.overview-content .overview-header {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem 2.5rem;
  margin-bottom: 1.75rem;
}

.overview-content .overview-header .page-title {
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 2rem;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .overview-content .overview-header .page-title {
  text-shadow: none;
  font-weight: 500;
}

@media (min-width: 768px) {
  .overview-content .overview-header .page-title {
    font-size: 1.8rem;
  }
}

.overview-content .overview-header .page-title .gradient-text {
  color: #000000; /* 浅色主题下设置为黑色 */
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 深色主题下仍然使用渐变效果 */
[data-theme="dark"] .overview-content .overview-header .page-title .gradient-text {
  background: linear-gradient(to right, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.overview-content .overview-header .page-title .gradient-text:hover {
  transform: scale(1.03);
}

.overview-content .overview-header p {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

[data-theme="dark"] .overview-content .overview-header p {
  color: #a5b4fc;
  opacity: 0.9;
}

.overview-content .features-section {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .overview-content .features-section {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.75rem;
  }
}
  
  .no-features {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 3rem 2rem;
  margin-top: 1.75rem;
  text-align: center;
}

/* 深色模式样式 - 为所有玻璃卡片添加统一的深色模式样式 */
[data-theme="dark"] .overview-header,
[data-theme="dark"] .features-section,
[data-theme="dark"] .no-features {
  background: rgba(28, 28, 30, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

h3 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

@media (max-width: 1024px) {
  .overview-header {
    padding: 2.5rem 2rem;
  }
}

@media (max-width: 768px) {
  .overview-header {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .overview-header {
    padding: 1.5rem 1rem;
  }
}

/* 标题区域样式已在 .overview-content 中定义，使用Apple液态玻璃设计效果 */
/* 移除重复的特性卡片网格样式，使用上面的液态玻璃样式版本 */
/* 移除重复的无内容提示样式，使用上面的液态玻璃样式版本 */
/* 响应式调整：在小屏幕上显示移动端菜单按钮 */
@media (max-width: 768px) {
  .mobile-menu-button {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 101;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: var(--transition);
  }
  
  .mobile-menu-button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
  
  /* 深色主题 */
  [data-theme="dark"] .mobile-menu-button {
    background: rgba(40, 40, 42, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  }
}

/* 添加页面进入动画 */
.overview-content {
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>